<head>
    <script src="../build/index.js"></script>
</head>

<body>
    <canvas id="app" width="800" height="400"></canvas>

    <script>
        var $app = new Easycanvas.Painter();
        $app.register(document.getElementById('app'));
        $app.start();

        var G = Easycanvas.ImgLoader('https://raw.githubusercontent.com/c-zhuo/easycanvas/master/demos/G.png');
        var r1 = 0;
        var r2 = 0;

        var Sprite1 = $app.add({
            content: {
                img: G,
            },
            style: {
                rotate: function () {return r1;},
                rx: 250, ry: 200, left: 250, top: 200,
                zIndex: 1,
            },
            events: {
                eIndex: 2,
                click: function () {
                    r1 += 180;
                    return true;
                },
            },
        });
        var Sprite2 = $app.add({
            content: {
                img: G,
            },
            style: {
                rotate: function () {return r2;},
                rx: 350, ry: 200, left: 350, top: 200,
                zIndex: 2,
            },
            events: {
                eIndex: 1,
                click: function () {
                    r2 += 180;
                    return true;
                },
            },
        });
    </script>
</body>

